<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>tree-sitter THE_LANGUAGE_NAME</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.19.0/clusterize.min.css">
    <link rel="icon" type="image/png" href="https://tree-sitter.github.io/tree-sitter/assets/images/favicon-32x32.png"
      sizes="32x32" />
    <link rel="icon" type="image/png" href="https://tree-sitter.github.io/tree-sitter/assets/images/favicon-16x16.png"
      sizes="16x16" />
    <style>
      /* Base Variables */
      :root {
        --light-bg: #f9f9f9;
        --light-border: #e0e0e0;
        --light-text: #333;
        --light-hover-border: #c1c1c1;
        --light-scrollbar-track: #f1f1f1;
        --light-scrollbar-thumb: #c1c1c1;
        --light-scrollbar-thumb-hover: #a8a8a8;

        --dark-bg: #1d1f21;
        --dark-border: #2d2d2d;
        --dark-text: #c5c8c6;
        --dark-panel-bg: #252526;
        --dark-code-bg: #1e1e1e;
        --dark-scrollbar-track: #25282c;
        --dark-scrollbar-thumb: #4a4d51;
        --dark-scrollbar-thumb-hover: #5a5d61;

        --primary-color: #0550ae;
        --primary-color-alpha: rgba(5, 80, 174, 0.1);
        --primary-color-alpha-dark: rgba(121, 192, 255, 0.1);
        --selection-color: rgba(39, 95, 255, 0.3);
      }

      /* Theme Colors */
      [data-theme="dark"] {
        --bg-color: var(--dark-bg);
        --border-color: var(--dark-border);
        --text-color: var(--dark-text);
        --panel-bg: var(--dark-panel-bg);
        --code-bg: var(--dark-code-bg);
      }

      [data-theme="light"] {
        --bg-color: var(--light-bg);
        --border-color: var(--light-border);
        --text-color: var(--light-text);
        --panel-bg: white;
        --code-bg: white;
      }

      /* Base Styles */
      body {
        margin: 0;
        padding: 0;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background-color: var(--bg-color);
        color: var(--text-color);
      }

      /* Layout */
      #playground-container {
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        background-color: var(--bg-color);
      }

      header {
        padding: 16px 24px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        gap: 20px;
        background-color: var(--panel-bg);
        font-size: 14px;
      }

      .header-item {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .language-name,
      #language-version {
        font-weight: 600;
      }

      main {
        flex: 1;
        display: flex;
        overflow: hidden;
      }

      #input-pane {
        width: 50%;
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--border-color);
        background-color: var(--panel-bg);
        overflow: hidden;
      }

      #code-container {
        flex: 1;
        min-height: 0;
        position: relative;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
      }

      #query-container:not([style*="visibility: hidden"]) {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }

      #query-container .panel-header {
        flex: 0 0 auto;
      }

      #query-container .CodeMirror {
        flex: 1;
        position: relative;
        min-height: 0;
      }

      #output-container-scroll {
        width: 50%;
        overflow: auto;
        background-color: var(--panel-bg);
        padding: 0;
        display: flex;
        flex-direction: column;
      }

      #output-container {
        font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
        line-height: 1.5;
        margin: 0;
        padding: 16px;
      }

      .panel-header {
        padding: 8px 16px;
        font-weight: 600;
        font-size: 14px;
        border-bottom: 1px solid var(--border-color);
        background-color: var(--panel-bg);
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .CodeMirror {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
        font-size: 14px;
        line-height: 1.6;
        background-color: var(--code-bg) !important;
        color: var(--text-color) !important;
      }

      .query-error {
        text-decoration: underline red dashed;
        -webkit-text-decoration: underline red dashed;
      }

      /* Scrollbars */
      ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      ::-webkit-scrollbar-track {
        border-radius: 4px;
        background: var(--light-scrollbar-track);
      }

      ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background: var(--light-scrollbar-thumb);
      }

      ::-webkit-scrollbar-thumb:hover {
        background: var(--light-scrollbar-thumb-hover);
      }

      [data-theme="dark"] {
        ::-webkit-scrollbar-track {
          background: var(--dark-scrollbar-track) !important;
        }

        ::-webkit-scrollbar-thumb {
          background: var(--dark-scrollbar-thumb) !important;
        }

        ::-webkit-scrollbar-thumb:hover {
          background: var(--dark-scrollbar-thumb-hover) !important;
        }
      }

      /* Theme Toggle */
      .theme-toggle {
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 6px;
        cursor: pointer;
        color: var(--text-color);
      }

      .theme-toggle:hover {
        background-color: var(--primary-color-alpha);
      }

      [data-theme="light"] .moon-icon,
      [data-theme="dark"] .sun-icon {
        display: none;
      }

      /* Form Elements */
      input[type="checkbox"] {
        margin-right: 6px;
        vertical-align: middle;
      }

      label {
        font-size: 14px;
        margin-right: 16px;
        cursor: pointer;
      }

      #output-container a {
        cursor: pointer;
        text-decoration: none;
        color: #040404;
        padding: 2px;
      }

      #output-container a:hover {
        text-decoration: underline;
      }

      #output-container a.node-link.named {
        color: #0550ae;
      }

      #output-container a.node-link.anonymous {
        color: #116329;
      }

      #output-container a.node-link.anonymous:before {
        content: '"';
      }

      #output-container a.node-link.anonymous:after {
        content: '"';
      }

      #output-container a.node-link.error {
        color: #cf222e;
      }

      #output-container a.highlighted {
        background-color: #d9d9d9;
        color: red;
        border-radius: 3px;
        text-decoration: underline;
      }

      #copy-button {
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        padding: 6px;
        cursor: pointer;
        color: var(--text-color);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
      }

      #copy-button:hover {
        background-color: var(--primary-color-alpha);
      }

      #copy-button:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px var(--primary-color-alpha);
      }

      .toast {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: var(--light-text);
        color: white;
        padding: 12px 16px;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        font-size: 14px;
        font-weight: 500;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.3s ease;
        z-index: 1000;
        pointer-events: none;
      }

      .toast.show {
        opacity: 1;
        transform: translateY(0);
      }

      /* Dark Theme Node Colors */
      [data-theme="dark"] {
        & #output-container a {
          color: #d4d4d4;
        }

        & #output-container a.node-link.named {
          color: #79c0ff;
        }

        & #output-container a.node-link.anonymous {
          color: #7ee787;
        }

        & #output-container a.node-link.error {
          color: #ff7b72;
        }

        & #output-container a.highlighted {
          background-color: #373b41;
          color: red;
        }

        & .CodeMirror {
          background-color: var(--dark-code-bg) !important;
          color: var(--dark-text) !important;
        }

        & .CodeMirror-gutters {
          background-color: var(--dark-panel-bg) !important;
          border-color: var(--dark-border) !important;
        }

        & .CodeMirror-cursor {
          border-color: var(--dark-text) !important;
        }

        & .CodeMirror-selected {
          background-color: rgba(255, 255, 255, 0.1) !important;
        }

        & .toast {
          background-color: var(--dark-bg);
          color: var(--dark-text);
        }
      }
    </style>
  </head>

  <body>
    <div id="playground-container" style="visibility: hidden;">
      <header>
        <div class="header-item">
          <span class="language-name">Language: THE_LANGUAGE_NAME</span>
          <span id="language-version"></span>
        </div>

        <div class="header-item">
          <input id="logging-checkbox" type="checkbox">
          <label for="logging-checkbox">log</label>
        </div>

        <div class="header-item">
          <input id="anonymous-nodes-checkbox" type="checkbox">
          <label for="anonymous-nodes-checkbox">show anonymous nodes</label>
        </div>

        <div class="header-item">
          <input id="query-checkbox" type="checkbox">
          <label for="query-checkbox">query</label>
        </div>

        <div class="header-item">
          <input id="accessibility-checkbox" type="checkbox">
          <label for="accessibility-checkbox">accessibility</label>
        </div>

        <div class="header-item">
          <label for="update-time">parse time: </label>
          <span id="update-time"></span>
        </div>

        <div class="header-item">
          <a href="https://tree-sitter.github.io/tree-sitter/7-playground.html#about">(?)</a>
        </div>

        <select id="language-select" style="display: none;">
          <option value="parser">Parser</option>
        </select>

        <div class="header-item">
          <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
            <svg class="sun-icon" viewBox="0 0 24 24" width="16" height="16">
              <path fill="currentColor"
                d="M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 1 0-14 7 7 0 0 1 0 14zm0-16a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V4a1 1 0 0 1 1-1zm0 15a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1zm9-9a1 1 0 0 1-1 1h-2a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1zM4 12a1 1 0 0 1-1 1H1a1 1 0 1 1 0-2h2a1 1 0 0 1 1 1z" />
            </svg>
            <svg class="moon-icon" viewBox="0 0 24 24" width="16" height="16">
              <path fill="currentColor"
                d="M12.1 22c-5.5 0-10-4.5-10-10s4.5-10 10-10c.2 0 .3 0 .5.1-1.3 1.4-2 3.2-2 5.2 0 4.1 3.4 7.5 7.5 7.5 2 0 3.8-.7 5.2-2 .1.2.1.3.1.5 0 5.4-4.5 9.7-10 9.7z" />
            </svg>
          </button>
        </div>
      </header>

      <main>
        <div id="input-pane">
          <div class="panel-header">Code</div>
          <div id="code-container">
            <textarea id="code-input"></textarea>
          </div>

          <div id="query-container" style="visibility: hidden; position: absolute;">
            <div class="panel-header">Query</div>
            <textarea id="query-input"></textarea>
          </div>
        </div>

        <div id="output-container-scroll">
          <div class="panel-header">
            Tree
            <button type="button" id="copy-button" class="theme-toggle" aria-label="Copy tree">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                stroke-linecap="round" stroke-linejoin="round">
                <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
              </svg>
            </button>
          </div>
          <pre id="output-container" class="highlight"></pre>
        </div>
      </main>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.19.0/clusterize.min.js"></script>

    <script>LANGUAGE_BASE_URL = "";</script>
    <script type="module" src="playground.js"></script>
    <script type="module">
      import * as TreeSitter from './web-tree-sitter.js';
      window.TreeSitter = TreeSitter;
      setTimeout(() => window.initializePlayground({local: true}), 1)
    </script>
  </body>
</html>
